<template>
	<view class="content">
		<view class="content_tl_box">
			<image class="content_tl_logo" src="/static/login/logo.png"></image>
			<view class="content_tl_cy">天津港</view>
			<view class="content_tl_zh">智慧油耗采集系统</view>
			<view class="content_tl_aq">Oil intelligent collection system</view>
		</view>

		<view class="input-group">
			<view class="input-row">
				<image class="input-row-img" src="/static/login/login_us.svg"></image>
				<input class="username fontsize14px" type="text" v-model="userModel.Phone" placeholder="请输入账号"
					placeholder-style="color:#ccc">
			</view>
			<view class="input-row">
				<image v-if="hidePwdText==true" class="input-row-img" src="/static/login/login_user.svg"
					@click="hidePwdText=false">
				</image>
				<image v-if="hidePwdText==false" class="input-row-img" src="/static/login/login_psw.svg"
					@click="hidePwdText=true">
				</image>
				<input class="password fontsize14px" type="text" :password="hidePwdText" v-model="userModel.Password"
					placeholder="请输入密码" placeholder-style="color:#ccc">
			</view>
		</view>
		<view class="btn-row">
			<button type="primary" class="primary fontwhite" @click="appUserLogin">登录</button>
		</view>
	</view>


</template>

<script>
	import {
		login,
		getUserInfo,
		clearToken
	} from '@/api/index/index.js'; //引入需要的api

	export default {
		data() {
			return {
				title: 'LoginPage',
				backUrl: '',
				hidePwdText: true,
				userModel: {
					Phone: '',
					Password: ''
				}
			}
		},
		onLoad(option) {

		},
		methods: {
			appUserLogin: function() {
				var that = this;
				login(that.userModel, (res) => {
					// console.log(res);
					const authTokenInfo = JSON.parse(res);
					// console.log(authTokenInfo);
					if (!res.access_token) {
						uni.setStorageSync("slToken", authTokenInfo.access_token);
						uni.setStorageSync("rsToken", authTokenInfo.refresh_token);
						uni.setStorageSync("slUserInfo", res);
						uni.showToast({
							title: '登录成功',
							duration: 2000,
							icon: 'none'
						});
						uni.redirectTo({
							url: '/pages/index/index'
						});
					} else {
						uni.showToast({
							title: res.Msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			alertShow: function() {
				uni.showLoading({
					title: '加载中'
				});
			}
		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
		height: 1920rpx;
		display: block;
		background: url('../../static/login/bgimg.png') no-repeat;
		background-size: auto 100%;
		background-attachment: fixed;
		/* background-position: 40% 0%; */
		animation: bgdh 3s;
		position: relative;
	}

	.content_tl_box {
		position: absolute;
		top: 176rpx;
		left: 69rpx;
		animation: tlbox 3s;
		right: 0;
	}

	@keyframes bgdh {
		from {
			background-position: 0% 0%
		}

		to {
			background-position: 40% 0%
		}
	}

	@keyframes tlbox {
		from {
			top: 0
		}

		to {
			top: 176rpx
		}
	}

	.content_tl_logo {
		width: 180rpx;
		height: 180rpx;
		display: block;
	}

	.content_tl_cy {
		margin-top: 10rpx;
		font-size: 50rpx;
		color: rgba(255, 255, 255, 1);
	}

	.content_tl_zh {
		font-size: 50rpx;
		height: 70rpx;
		color: #FFFFFF;
		font-weight: 600;
	}

	.content_tl_aq {
		font-size: 30rpx;
		color: rgba(255, 255, 255, .7);
		letter-spacing: 8rpx;
	}

	.input-group {
		position: absolute;
		top: 800rpx;
		box-sizing: border-box;
		width: 100%;
		padding: 0 84rpx;
	}

	.input-group::before {
		position: absolute;
		right: 0;
		top: 0;
		left: 0;
		height: 0px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.input-group::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 0px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.input-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 80rpx;
		background-color: rgba(255, 255, 255, .2);
		border-radius: 40rpx;
		margin-bottom: 30rpx;

	}

	.input-row-img {
		width: 50rpx;
		height: 50rpx;
		margin-left: 30rpx;
	}

	.input-row input {
		padding: 0;
		line-height: 80rpx;
		height: 80rpx;
		padding-left: 50rpx;
		color: #FFF;
	}

	.input-row.border::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 15px;
		height: 1px;
		content: '';
		webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.btn-row {
		box-sizing: border-box;
		position: absolute;
		top: 1000rpx;
		width: 100%;
		padding: 0 84rpx;

	}

	.btn-row button.primary {
		background-color: rgba(69, 165, 255, .75);
		border-radius: 40rpx;
		font-size: 32rpx;
	}

	.action-row {
		position: absolute;
		top: 85%;
		right: 60rpx;
	}

	.action-row navigator {
		color: rgb(204, 204, 204);
		float: right;
	}

	.username {
		width: 100%;
	}

	.password {
		width: 100%;
	}
</style>
